// ========================================================
// loading 加载中UI生成器
// ========================================================

@mixin loading() {
    position: relative;

    &:before {
        position: absolute;
        left: 50%;
        top: $loading-top;
        display: block;
        content: " ";
        width: $loading-size;
        height: $loading-size;
        background-color: $loading-color;
    
        z-index: 9999;
        margin-left: - ($loading-size / 2);
        -webkit-animation: loading $loading-time infinite ease-in-out;
        animation: loading $loading-time infinite ease-in-out;
    }

    &:after {
        content: " ";
        display: block;
        position: absolute;
        z-index: 8888;

        width: 100%;
        height: 100%;
        background-color: #FFF;
    }
 
    @-webkit-keyframes loading {
        0% { -webkit-transform: perspective(120px) }
        50% { -webkit-transform: perspective(120px) rotateY(180deg) }
        100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }
 
    @keyframes loading {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
        }

        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
        } 100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }
}